{% from 'bootstrap/nav.html' import render_nav_item %}

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>{% block title %}{% endblock %}-博客</title>
        {# 网页图标 #}
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        {% block styles %}
            {# 导入css文件 #}
            <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
            {# 导入图标的css样式 #}
            <link rel="stylesheet"
                  href="{{ url_for('static', filename='open-iconic/font/css/open-iconic-bootstrap.css') }}">
            {# 自定义css样式 #}
            <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
        {% endblock %}
    {% endblock %}
</head>

<body>
{# 设置导航栏 #}
{% block navbar %}
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            {# 图像按钮#}
            <a class="navbar-brand" href="{{ url_for('main.index') }}">
                <img src="{{ url_for('static', filename='favicon.ico') }}"
                     class="d-inline-block align-top" alt="Bluelog">
            </a>
            {# 自动收缩的导航栏 #}
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            {# 导航栏的菜单 #}
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    {{ render_nav_item('main.index', '蓝客') }}
                    {{ render_nav_item('main.explore', '探索中心') }}
                    {# 搜索按钮#}
                    <form class="form-inline my-2 my-lg-0" action="{{ url_for('main.search') }}">
                        <input type="text" name="q" class="form-control mr-sm-1" placeholder="文章 或 用户"
                               required>
                        <button class="btn btn-light my-2 my-sm-0" type="submit">
                            <span class="oi oi-magnifying-glass"></span>
                        </button>
                    </form>
                </ul>
                {#右上角的登录与注册按钮#}
                <div class="navbar-nav ml-auto">
                    {#判断用户是否登录#}
                    {% if current_user.is_authenticated %}
                        <li class="nav-item dropdown">
                            {# 相关创建功能#}
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">
                                创建 <span class="caret"></span>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="{{ url_for('user.new_post') }}">文章</a>
                                {# 只有admin角色才能创建#}
                                {% if current_user.role.name == 'admin' %}
                                    <a class="dropdown-item" href="{{ url_for('user.new_category') }}">分类</a>
                                    <a class="dropdown-item" href="{{ url_for('user.new_link') }}">友情链接</a>
                                {% endif %}
                            </div>
                        </li>
                        {# 用户登录后,展示通知#}
                        <a class="nav-item nav-link" href="{{ url_for('main.show_notifications', filter='unread') }}">
                            <span class="oi oi-bell"></span>
                            <span id="notification-badge"
                                  class="{% if notification_count == 0 %}hide{% endif %} badge badge-danger badge-notification"
                                  data-href="{{ url_for('ajax.notifications_count') }}">{{ notification_count }}</span>
                        </a>
                        {# 展示个人用户的功能#}
                        <div class="dropdown nav-item">
                            {# 获取头像 #}
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-expanded="false">
                                <img class="avatar-xs"
                                     src="{{ url_for('main.get_avatar', filename=current_user.avatar_s) }}">
                                <span class="caret"></span>
                            </a>
                            {# 用户下拉菜单 #}
                            <div class="dropdown-menu dropdown-menu-right" role="menu">
                                <h6 class="dropdown-header">{{ current_user.username }} 已登录</h6>
                                <a class="dropdown-item"
                                   href="{{ url_for('user.index', username=current_user.username) }}">
                                    <span class="oi oi-person"></span> 个人中心
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="{{ url_for('user.edit_profile') }}">
                                    <span class="oi oi-cog"></span> 用户设置
                                </a>
                                {% if current_user.can('MODERATE') %}
                                    <a class="dropdown-item" href="#">
                                        <span class="oi oi-dashboard"></span> 展示面板
                                    </a>
                                {% endif %}
                                <a class="dropdown-item" href="{{ url_for('auth.logout') }}">
                                    <span class="oi oi-power-standby"></span> 注销
                                </a>
                            </div>
                        </div>
                    {% else %}
                        <a class="btn btn-outline-primary" href="{{ url_for('auth.login') }}">登录</a>&nbsp;&nbsp;
                        <a class="btn btn-primary" href="{{ url_for('auth.register') }}">注册</a>
                    {% endif %}
                </div>

            </div>
        </div>
    </nav>
{% endblock %}


<main>
    <div class="container">
        {% for message in get_flashed_messages(with_categories=True) %}
            <div class="alert alert-{{ message[0] }}">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{ message[1] }}
            </div>
        {% endfor %}
        {% block content %}{% endblock %}
        {% block footer %}
            {# 脚注 #}
            <footer>
                <p class="float-left">
                    <small> &copy; 2022 <a href="http://huyinfu.top/user" title="Written by HYF">HYF</a> -
                        <a href="https://gitee.com/hyf-github-user" title="Fork me on Gitee">Gitee</a> -
                        <a href="http://gitee.com/hyf-github-user/flask-bluelog" title="A Bluelog project">Bluelog</a>
                    </small>
                </p>
                <p class="float-right">
                    <small>Capture and share every wonderful moment.</small>
                </p>
            </footer>
        {% endblock %}
    </div>
</main>
<div id="toast"></div>

{% block scripts %}
    {# 导入js文件 #}
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    {#  导入自定义的js文件  #}
    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
    {{ moment.include_moment(local_js=url_for('static', filename='js/moment-with-locales.min.js')) }}
    <script type="text/javascript">
        const csrf_token = "{{ csrf_token() }}";
        // 判断用户是否登录
        {% if current_user.is_authenticated %}
            const is_authenticated = true;
        {% else %}
            const is_authenticated = false;
        {% endif %}
    </script>
{% endblock %}
</body>
</html>
